<template>
  <vue-draggable-resizable
    class="region-search"
    v-if="visible"
    :resizable="false"
    :x="0"
    :y="0"
    :w="500"
    :h="400"
    :z="2001">
    <el-card :body-style="{padding: '20px 10px'}" shadow="always" class="search-card">
      <div slot="header" class="search-header">
        <span>高级搜索</span>
        <div style="float:right; padding:3px 0">
          <el-button
            v-if="bodyVisible"
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-upload2"
          >折叠</el-button>

          <el-button
            v-else
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-download"
          >展开</el-button>
          <el-button style="padding:0" type="text" @click="close()">关闭搜索</el-button>
        </div>
      </div>

      <div class="search-body" v-if="bodyVisible">
        <el-form :model="searchForm" ref="searchForm" label-width="100px">
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="searchForm.deviceName" placeholder="设备名称" clearable />
          </el-form-item>
          <el-form-item label="分类名称" prop="cateId">
            <el-input
              placeholder="请选择分类"
              v-model="searchForm.cateName"
              type="text"
              readonly>
              <template slot="suffix">
                <el-button class="el-icon-edit" @click="checkSort" type="text">选择分类</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="区域" prop="areaId">
            <el-select
              filterable
              v-model="searchForm.areaId"
              placeholder="请选择区域"
              clearable
              style="width:100%"
            >
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备状态"  prop="status">
            <el-select v-model="searchForm.status" filterable placeholder="请选择">
              <el-option
                v-for="item in deveiceStatusList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生产厂家" prop="manufacturer">
            <el-input v-model="searchForm.manufacturer" placeholder="生产厂家" clearable />
          </el-form-item>
          <el-form-item label="使用单位" prop="useCompany">
            <el-input v-model="searchForm.useCompany" placeholder="使用单位" clearable />
          </el-form-item>
          <el-form-item>
            <el-button @click="doSearch()" type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog
        title="分类管理"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        append-to-body
        width="40%"
      >
        <paper-cate
          ref="paperCate"
          type="配置分类"
          :setCurrent="setCurrent"
          :current="current"
          :url="{
                update:'/device/devicecate/update',
                save:'/device/devicecate/save',
                delete:'/device/devicecate/delete',
                tree:'/device/devicecate/tree'
        }"
        />

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </vue-draggable-resizable>
</template>

<script>
  import VueDraggableResizable from 'vue-draggable-resizable'
  import paperCate from '../../paper/papercate'
  export default {
    name: 'RegionSearch',
    components: {
      VueDraggableResizable,
      paperCate
    },
    data () {
      return {
        dialogFormVisible: false,
        visible: false,
        bodyVisible: true,
        areaList: [],
        deveiceStatusList: [
          {
            key: 1,
            value: '在用'
          },
          {
            key: 2,
            value: '闲置'
          },
          {
            key: 3,
            value: '待修'
          },
          {
            key: 4,
            value: '借入'
          },
          {
            key: 5,
            value: '借出'
          },
          {
            key: 6,
            value: '报废'
          },
          {
            key: 7,
            value: '其他'
          }
        ],
        current: {},
        searchForm: {
          deviceName: '',
          areaId: '',
          manufacturer: '',
          useCompany: '',
          deviceStatus: '',
          cateName: '',
          cateId: ''
        },
        deptIds: []
      }
    },
    methods: {
      async doSearch () {
        this.$emit('onSearched', this.searchForm)
      },
      checkSort() {
        this.paperCate = true
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.paperCate.init()
        })
      },
      setCurrent(data) {
        this.searchForm.cateId = data.id
        this.searchForm.cateName = data.name
        if (data.id) this.current = data
      },
      open () {
        // this.$store.dispatch('user/loadDeptList')
        this.visible = true
        this.searchForm = {
          deviceName: '',
          areaId: '',
          manufacturer: '',
          useCompany: '',
          status: '',
          cateName: '',
          cateId: ''
        }
        // this.$nextTick(() => this.$refs.searchForm.resetFields())
        this.getAreaList()
      },
      async getAreaList() {
        var res = await this.$http.post('device/area/list')
        this.areaList = res.data
      },
      close () {
        // this.$emit('onCancel')
        this.visible = false
        this.deptIds = []
        this.searchForm = {}
        this.$emit('onSearched', this.searchForm)
      },
      toggleBody () {
        this.bodyVisible = !this.bodyVisible
      }
    },
    computed: {
      formProps () {
        return {
          deptTree: this.$store.getters['user/deptTree']
        }
      }
    },
    watch: {
      'deptIds' (val) {
        if (val && val.length > 0) {
          this.searchForm.deptId = val[val.length - 1]
        } else {
          this.searchForm.deptId = null
        }
      }
    }
  }
</script>

<style lang="less">
  .region-search {
    position: absolute;
    border: none;

    .search-card {
      .search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
</style>
